const editor = document.getElementById("editor");
let scenes = [];
let options = [];
let lines = [];

// 新建场景
function newScene() {
    const scene = document.createElement("div");
    scene.className = "scene";
    scene.style.left = `${Math.random() * (editor.clientWidth - 200)}px`;
    scene.style.top = `${Math.random() * (editor.clientHeight - 100)}px`;

    const nameInput = document.createElement("input");
    nameInput.type = "text";
    nameInput.placeholder = "场景名称";
    nameInput.className = "scene-name";
    scene.appendChild(nameInput);

    // 添加连接点
    const points = [
        { x: 0, y: 0 }, // 左上
        { x: 190, y: 0 }, // 右上
        { x: 0, y: 90 }, // 左下
        { x: 190, y: 90 } // 右下
    ];

    points.forEach(point => {
        const connectPoint = document.createElement("div");
        connectPoint.className = "connect-point";
        connectPoint.style.left = `${point.x}px`;
        connectPoint.style.top = `${point.y}px`;
        connectPoint.addEventListener("mousedown", startLineDrawing.bind(null, scene, point));
        scene.appendChild(connectPoint);
    });

    scene.draggable = true;
    scene.ondrag = handleDrag;
    editor.appendChild(scene);
    scenes.push(scene);
}

// 新建选项
function newOption() {
    const option = document.createElement("div");
    option.className = "option";
    option.style.left = `${Math.random() * (editor.clientWidth - 150)}px`;
    option.style.top = `${Math.random() * (editor.clientHeight - 50)}px`;

    const nameInput = document.createElement("input");
    nameInput.type = "text";
    nameInput.placeholder = "选项名称";
    nameInput.className = "option-name";
    option.appendChild(nameInput);

    // 添加连接点
    const points = [
        { x: 0, y: 0 }, // 左上
        { x: 140, y: 0 }, // 右上
        { x: 0, y: 40 }, // 左下
        { x: 140, y: 40 } // 右下
    ];

    points.forEach(point => {
        const connectPoint = document.createElement("div");
        connectPoint.className = "connect-point";
        connectPoint.style.left = `${point.x}px`;
        connectPoint.style.top = `${point.y}px`;
        connectPoint.addEventListener("mousedown", startLineDrawing.bind(null, option, point));
        option.appendChild(connectPoint);
    });

    option.draggable = true;
    option.ondrag = handleDrag;
    editor.appendChild(option);
    options.push(option);
}

// 拖动处理
function handleDrag(event) {
    event.target.style.left = `${event.clientX - event.target.offsetWidth / 2}px`;
    event.target.style.top = `${event.clientY - event.target.offsetHeight / 2}px`;
}

// 开始绘制连线
function startLineDrawing(source, point, event) {
    const line = document.createElement("div");
    line.className = "line";
    line.style.left = `${event.clientX}px`;
    line.style.top = `${event.clientY}px`;
    line.style.width = "0px";
    line.style.height = "0px";
    editor.appendChild(line);

    document.addEventListener("mousemove", drawLine.bind(null, line, source, point));
    document.addEventListener("mouseup", endLineDrawing.bind(null, line));
}

// 绘制连线
function drawLine(line, source, point, event) {
    const startX = source.getBoundingClientRect().left + point.x;
    const startY = source.getBoundingClientRect().top + point.y;
    const endX = event.clientX;
    const endY = event.clientY;

    const width = endX - startX;
    const height = endY - startY;

    line.style.left = `${startX}px`;
    line.style.top = `${startY}px`;
    line.style.width = `${Math.abs(width)}px`;
    line.style.height = `${Math.abs(height)}px`;
    line.style.transform = `rotate(${Math.atan2(height, width) * (180 / Math.PI)}deg)`;
}

// 结束绘制连线
function endLineDrawing(line, event) {
    document.removeEventListener("mousemove", drawLine);
    document.removeEventListener("mouseup", endLineDrawing);

    // 检查连线是否连接到其他场景或选项
    const target = document.elementFromPoint(event.clientX, event.clientY);
    if (target && (target.classList.contains("scene") || target.classList.contains("option"))) {
        line.dataset.source = line.parentNode.id;
        line.dataset.target = target.id;
        lines.push(line);
    } else {
        line.remove();
    }
}

// 导出数据
function exportData() {
    const data = {
        scenes: scenes.map(scene => ({
            name: scene.querySelector(".scene-name").value,
            x: scene.style.left,
            y: scene.style.top
        })),
        options: options.map(option => ({
            name: option.querySelector(".option-name").value,
            x: option.style.left,
            y: option.style.top
        })),
        lines: lines.map(line => ({
            source: line.dataset.source,
            target: line.dataset.target
        }))
    };
    console.log("导出数据：", data);
    alert("导出数据到控制台");
}

// 导入数据
function importData() {
    const jsonData = `{
        "scenes": [{"name": "场景1", "x": "100px", "y": "100px"}],
        "options": [{"name": "选项1", "x": "300px", "y": "200px"}],
        "lines": [{"source": "scene1", "target": "option1"}]
    }`;

    const data = JSON.parse(jsonData);

    data.scenes.forEach(sceneData => {
        const scene = document.createElement("div");
        scene.className = "scene";
        scene.style.left = sceneData.x;
        scene.style.top = sceneData.y;

        const nameInput = document.createElement("input");
        nameInput.type = "text";
        nameInput.placeholder = "场景名称";
        nameInput.className = "scene-name";
        nameInput.value = sceneData.name;
        scene.appendChild(nameInput);

        editor.appendChild(scene);
        scenes.push(scene);
    });

    data.options.forEach(optionData => {
        const option = document.createElement("div");
        option.className = "option";
        option.style.left = optionData.x;
        option.style.top = optionData.y;

        const nameInput = document.createElement("input");
        nameInput.type = "text";
        nameInput.placeholder = "选项名称";
        nameInput.className = "option-name";
        nameInput.value = optionData.name;
        option.appendChild(nameInput);

        editor.appendChild(option);
        options.push(option);
    });

    data.lines.forEach(lineData => {
        const line = document.createElement("div");
        line.className = "line";
        line.dataset.source = lineData.source;
        line.dataset.target = lineData.target;

        const source = document.getElementById(lineData.source);
        const target = document.getElementById(lineData.target);

        const startX = source.getBoundingClientRect().left + source.offsetWidth / 2;
        const startY = source.getBoundingClientRect().top + source.offsetHeight / 2;
        const endX = target.getBoundingClientRect().left + target.offsetWidth / 2;
        const endY = target.getBoundingClientRect().top + target.offsetHeight / 2;

        const width = endX - startX;
        const height = endY - startY;

        line.style.left = `${startX}px`;
        line.style.top = `${startY}px`;
        line.style.width = `${Math.abs(width)}px`;
        line.style.height = `${Math.abs(height)}px`;
        line.style.transform = `rotate(${Math.atan2(height, width) * (180 / Math.PI)}deg)`;

        editor.appendChild(line);
        lines.push(line);
    });

    alert("导入完成");
}